<template>
    <view>
        <view class="logo" :style="'top:' + statusBarHeight + 'px'">
            <image @click="goBack()" src="@/static/left.png"></image>
            <text>资讯</text>
        </view>
        
        <view class="u-page" :style="'margin-top:' + navHeight + 'px'">
            <u-list
                @scrolltolower="scrolltolower"
                :height='windowHeight - navHeight - 40'
            >
                <u-list-item
                    v-for="(item, index) in indexList"
                    :key="index"
                >
                    <view @click="getDetail(item)">
                        <image :src="item.image_url" mode="aspectFill"></image>
                        <view class="s1">
                            <view class="title">{{ item.title }}</view>
                            <view class="desc">{{ item.desc }}</view>
                        </view>
                    </view>
                </u-list-item>
            </u-list>
        </view>
    </view>
</template>

<script>
    import { systemInfo } from '@/common/mixin.js'
    export default {
        mixins: [systemInfo],
        data() {
            return {
                indexList: [],
                page: 1,

            }
        },
        onLoad() {
            this.getSystemInfo();
            this.loadmore();
        },
        methods: {
            goBack() {
                uni.redirectTo({
                    url: '/pages/index/index'
                })
            },
            scrolltolower() {
                this.loadmore()
            },
            loadmore() {
                let that = this
                that.$API.getNewsList({page: that.page}).then(res => {
                    if (that.page == 1) {
                        that.indexList = [];
                    }
                    res.data.data.forEach(v => {
                        that.indexList.push(v);
                    })
                    that.page += 1;
                });
            },
            getDetail(item) {
                if (item.detail_url) {
                    uni.navigateTo({
                        url: '/pages/index/h5?url=' + encodeURIComponent(item.detail_url)
                    })
                } else {
                    uni.navigateTo({
                        url: '/pages/index/detail?id=' + item.id
                    })
                }
            }
        },
        onShareAppMessage() {
            return {
              title: '青梅产业大会资讯',
              path: '/pages/index/news'
            }
        },
        onShareTimeline() {
            return {
              title: '青梅产业大会资讯',
              path: '/pages/index/news'
            }
        }
    }
</script>

<style>
page {
    background: linear-gradient(180deg, #F6FBEE 0%, #C5E5E1 100%);
}
</style>
<style lang="scss">
    .logo {
        position: relative;
        left: 38rpx;
        display: flex;
        align-items: center;
        padding-top: 5rpx;
        image {
            width: 52rpx;
            height: 52rpx;
            margin-right: 12rpx;
            margin-top: 15rpx;
        }
        text {
            height: 52rpx;
            line-height: 52rpx;
            font-size: 36rpx;
            font-weight: bold;
            margin-top: 15rpx;
        }
    }
    .u-page {
        position: relative;
        width: 670rpx;
        margin: 0 auto;
        .u-list {
            view {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                flex-wrap: wrap;
                .u-list-item {
                    width: 670rpx;
                    height: 460rpx;
                    overflow: hidden;
                    margin-bottom: 40rpx;
                    image {
                        width: 670rpx;
                        height: 284rpx;
                        border-radius: 32rpx 32rpx 0 0;
                    }
                    .s1 {
                        width: 670rpx;
                        height: 176rpx;
                        background: #FFFFFF;
                        border-radius: 0rpx 0rpx 32rpx 32rpx;
                        .title {
                            width: 630rpx;
                            height: 36rpx;
                            font-size: 30rpx;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            line-height: 36rpx;
                            padding-top: 28rpx;
                            padding-left: 20rpx;
                        }
                        .desc {
                            width: 630rpx;
                            height: 72rpx;
                            font-size: 24rpx;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            color: #666666;
                            line-height: 36rpx;
                            overflow: hidden;
                            padding-top: 12rpx;
                            padding-left: 20rpx;
                            text-overflow: ellipsis;
                            display:-webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient:vertical;
                        }
                    }
                }
            }
        }
    }
</style>
